<%--
  Created by IntelliJ IDEA.
  User: DELL
  Date: 2020/8/27
  Time: 23:35
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title></title>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/css/bootstrap.min.css" />
    <script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery.min.js"></script>
    <script type="text/javascript" src="${pageContext.request.contextPath}/js/bootstrap.min.js"></script>
</head>

<body>
<!--表单查询-->
<div class="panel panel-primary" style="border: 1px solid dodgerblue;">
<%--    <div class="panel-heading" style="background-color: dodgerblue;">条件查询</div>--%>
<%--    <br>--%>
    <form class="form-horizontal">
        <div class="form-group">

            <label class="col-sm-2 control-label" align="right">教室:</label>
            <div class="col-sm-2">
                <input type="text" class="form-control" placeholder="请输入要查询的教室名" />
            </div>

<%--            <label class="col-sm-2 control-label" align="right">年龄:</label>--%>
<%--            <div class="col-sm-2">--%>
<%--                <input type="text" class="form-control" placeholder="请输入要查询的年龄" />--%>
<%--            </div>--%>
            <div class="col-sm-4">
                <button class="btn btn-success btn-sm">查询</button>
                <button type="button" class="btn btn-success btn-sm" onclick="addWin()">新增</button>
            </div>
        </div>
    </form>
</div>
<!--表格-->
<div class="panel panel-primary" style="border: 1px solid dodgerblue;">
    <div class="panel-heading" style="background-color: dodgerblue;">教室列表</div>
    <table class="table table-bordered table-hover">
        <thead>
        <th width="5%">id</th>
        <th>教室名</th>
        <th>课程名</th>
        <th>使用时间</th>
        <th width="20%">操作</th>
        </thead>
        <tbody id="tb">

        </tbody>
    </table>

</div>
<div style="position: absolute;left: 40%;">
    每页
    <select style="height: 30px;width: 60px; border: 1px solid green;" id="myrow" onchange="loadList()">
        <option value="5">5</option>
        <option value="10">10</option>
    </select>
    条

    <button class="btn btn-success btn-sm" onclick="pre()">上一页</button>
    <button class="btn btn-success btn-sm" onclick="next()">下一页</button>
    <button class="btn btn-success btn-sm" onclick="indexPage()">首页</button>
    <button class="btn btn-success btn-sm" onclick="endPages()">尾页</button>
</div>
<!--模态框-->
<div class="modal fade" id="myWin" style="top:200px">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header" style="background-color: dodgerblue;height: 40px;padding-top: 1px;">
                <h4 align="center" id="title">教室新增</h4>
            </div>
            <div class="modal-body">
                <form class="form-horizontal">
                    <div class="form-group">
                        <div id="roomId_context">
                            <label class="col-sm-2 control-label" align="right">id:</label>
                            <div class="col-sm-10">
                                <input type="text" id="roomId" class="form-control" readonly="true" placeholder="请输入id" />
                            </div>
                        </div>
                        <div id="roomName_context">
                            <label class="col-sm-2 control-label" align="right">教室名:</label>
                            <div class="col-sm-10">
                                <input type="text" id="roomName" class="form-control" placeholder="请输入教室名" />
                            </div>
                        </div>
                        <div id="classesName_context">
                            <label class="col-sm-2 control-label" align="right">课程名:</label>
                            <div class="col-sm-10">
                                <%--<input type="text" id="classesName" class="form-control" placeholder="请输入课程名" />--%>
                                <select id="classesName" class="form-control"></select>
                            </div>
                        </div>
                        <div id="classesDate_context">
                            <label class="col-sm-2 control-label" align="right">使用日期:</label>
                            <div class="col-sm-10">
                                <input type="datetime-local" id="classesDate" class="form-control" placeholder="请输入使用时间" />
                            </div>
                        </div>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button class="btn btn-success" type="button" id="updateBtn" onclick="update()">修改</button>
                <button class="btn btn-success" type="button" id="addBtn" onclick="insert()">新增</button>
                <button class="btn btn-success" type="button" data-dismiss="modal">取消</button>
            </div>
        </div>
    </div>
</div>
</body>

</html>
<script>
    $(function() {
        //加载房间
        loadList();
    })

    var page = 1;
    var endPage;

    //上一页
    function pre() {
        page--;
        if (page<1){
            page = 1;
        }
        loadList();
    }

    //下一页
    function next() {
        page++;
        if (page>endPage){
            page = endPage;
        }
        loadList();
    }

    //首页
    function indexPage() {
        page = 1;
        loadList();
    }

    //加载数据
    function DataPre() {
        $.ajax({
            url:"${pageContext.request.contextPath}/room/findClasses",
            type:"get",
            dataType:"json",
            success:function (data) {
                console.log(data);
                var html = "<option selected hidden disabled value=\"\">选择课程</option>";
                for (var i = 0;i<data.length;i++){
                    html += "<option value="+data[i].clId+">" + data[i].clName +"</option>"
                }
                $("#classesName").html(html);
            }
        })
    }

    //尾页
    function endPages() {
        page = endPage;
        loadList();
    }

    //加载房间列表
    function loadList(){
        //获取用户每页条数
        var row = $("#myrow").val();
        $.ajax({
            url:"${pageContext.request.contextPath}/room/select",
            data:{"page":page,"row":row},
            type:"get",
            dataType:"json",
            success:function (data) {
                console.log(data);
                //获取查询的结果集
                var list = data.data;
                //尾页
                endPage=data.endPage;
                //显示总条数
                $("#page").text(data.total);
                //显示总页数
                $("#total").text(data.pages);
                //显示当前页
                $("#curPage").text(data.curPage);
                //拼接html的变量
                var html = "";
                for(var i = 0;i<list.length;i++){

                    var data = new Date(list[i].useTime)
                    html += "<tr>" +
                            "<td>" + list[i].rId + "</td>" +
                            "<td>" + list[i].rName + "</td>" +
                            "<td>" + list[i].clName + "</td>" +
                            "<td>" +data.toLocaleDateString().replace(/\//g,"-")+
                        data.toLocaleTimeString()+"</td>" +
                        "<td><button class='btn btn-warning btn-sm' onclick='upWindow(this)'>修改</button>" +
                        "<button class='btn btn-danger btn-sm' onclick='del(this)'>删除</button></td>" +
                        "<button class='btn btn-warning btn-sm' onclick='fpRole(this)'>分配权限</button>"+
                        "</tr>"
                }
                //html设置文本和标签
                $("#tb").html(html);
            }
        })
    }

    //新增窗口
    function addWin(){
        //清空模态框的数据
        clearWin();
        DataPre();
        //显示模态框
        $("#myWin").modal("show");
        $("#roomId_context").hide();
        //更改窗体的标题
        $("#title").text("学员新增");
        //隐藏修改按钮的button
        $("#updateBtn").hide();
        //显示新增按钮的button
        $("#addBtn").show();
    }

    //修改窗口
    function upWindow(obj){
        //显示模态框
        DataPre();
        $("#myWin").modal("show");
        $("#roomId_context").show();
        //更改窗体的标题
        $("#title").text("教室修改");
        //隐藏新增按钮的button
        $("#addBtn").hide();
        //显示修改按钮的button
        $("#updateBtn").show();

        //获取选中行的的第一列的数据
        var id = $(obj).parent().parent().find("td").eq(0).text();
        //设置模态框中 的值
        $("#roomId").val(id);

        //获取选中行的的第二列的数据
        var name = $(obj).parent().parent().find("td").eq(1).text();
        //设置模态框中 的值
        $("#roomName").val(name);

        //获取选中行的的第三列的数据
        var age = $(obj).parent().parent().find("td").eq(2).text();
        //设置模态框中 的值
        $("#classesName").val(age);

        //获取选中行的的第四列的数据
        var date = $(obj).parent().parent().find("td").eq(3).text();
        //设置模态框中 的值
        $("#classesDate").val(date);


    }

    // 清空模态框
    function clearWin(){
        $("#roomId").val("");
        $("#roomName").val("");
        $("#classesName").val("");
        $("#classesDate").val("");
    }

    //删除
    function del(obj) {
        var info = confirm("你确定要删除吗")
        if(info){
            //获取要删除的id
            var id = $(obj).parent().parent().find("td").eq(0).text();
            $.ajax({
                url:"${pageContext.request.contextPath}/room/delete",
                data:{"id":id},
                type:"get",
                dataType:"json",
                success:function(data){
                    if(data.info=="删除成功"){
                        $("#myWin").modal("hide")
                        //刷新
                        loadList();
                    }else{
                        alert(data.info);
                    }

                }
            })
        }
    }

    //增加
    function insert() {
        var rName = $("#roomName").val();
        var clId = $("#classesName").val();
        var useTime = $("#classesDate").val();

        var arr = useTime.split("T");
        var date = arr[0] + " " + arr[1]+":00";
        var time = new Date(date)
        var timeStamp = time.getTime();

        $.ajax({
            url:"${pageContext.request.contextPath}/room/insert",
            data:{"rName":rName,"clId":clId,"timeStamp":timeStamp},
            type:"get",
            dataType:"json",
            success:function (data) {
                if (data.info=="增加成功"){
                    $("#myWin").modal("hide");
                    //刷新
                    loadList();
                }else{
                    alert(data.info);
                }
            }
        })
    }

    //更新
    function update() {
        var rId = $("#roomId").val();
        var rName = $("#roomName").val();
        var clId = $("#classesName").val();
        var useTime = $("#classesDate").val();

        var arr = useTime.split("T");
        var date = arr[0] + " " + arr[1]+":00";
        var time = new Date(date)
        var timeStamp = time.getTime();

        $.ajax({
            url:"${pageContext.request.contextPath}/room/update",
            data:{"rId":rId,"rName":rName,"clId":clId,"timeStamp":timeStamp},
            type:"get",
            dataType:"json",
            success:function (data) {
                if (data.info=="修改成功"){
                    $("#myWin").modal("hide");
                    //刷新
                    loadList();
                }else{
                    alert(data.info);
                }
            }
        })
    }


</script>